<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>内置指令</title>
</head>   
<body>
  <div id="root">
    <h2>内置指令</h2>
    <hr>
    <!-- 
      v-bind  : 单项绑定解析表达式 ，语法糖： :xxx
      v-model  : 双向数据绑定
      v-on  : 绑定事件监听 语法糖： @
      v-if  : 条件渲染（动态控制节点是否存在）
      v-else  : 条件渲染（动态控制节点是否存在）
      v-show  : 条件渲染（动态控制节点是否展示）
      v-for  : 遍历数组/对象/字符串 
      v-text  : 向所在节点渲染指定文本内容
      v-html  : 向所在节点渲染指定标签内容
      v-cloak  : 向所在节点渲染指定文本内容
      v-once  : 向所在节点渲染指定文本内容
      v-pre  : 向所在节点渲染指定文本内容
    -->
    <!-- v-text 解析文本-->
    <div v-text="name">你好，</div>

    <!-- v-html 解析标签-->
    <div v-html="aStr"></div>

    <!-- v-cloak 添加爹play：none属性，vue实例接管容器之后会删除此属性-->
    <h3 v-cloak> hello {{name}} </h3>

    <!-- v-once 添加此属性的标签只会在初始动态渲染后，转为为静态属性-->
    <div v-once> number初始值为 {{ number }} </div>
    <div>number值为 {{ number }} </div>
    <button @click="number++">number++</button>

    <!-- v-pre 添加此属性，vue实例解析模板时会跳过解析阶段 一般用于优化-->
    <div v-pre> number值为 {{ number }} </div>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
      el:'#root', 
      data:{
        name: 'Vue',
        number:1,
        aStr: `<a href="javascript:alert('XSS攻击成功');">链接标签</a>`
      },
      methods: {},
      computed: {}
    })
  </script>
</body>
</html>